Getting Started
Beautiful README badges. Drop-in shields.io replacement styled as shadcn/ui buttons.
What is shieldcn?
shieldcn serves SVG badge images that look like shadcn/ui Button components — same font, border-radius, padding, and color tokens. Use them in GitHub READMEs, npm pages, docs sites, and anywhere that accepts <img> tags.
Quick start
Add a badge to your README:
That's it. No configuration, no API keys, no build step.
Badge types
| Badge | URL pattern |
|---|---|
| npm version | /npm/{package}.svg |
| npm downloads | /npm/dw/{package}.svg |
| npm license | /npm/license/{package}.svg |
| npm types | /npm/types/{package}.svg |
| GitHub stars | /github/stars/{owner}/{repo}.svg |
| GitHub forks | /github/forks/{owner}/{repo}.svg |
| GitHub release | /github/release/{owner}/{repo}.svg |
| GitHub CI | /github/ci/{owner}/{repo}.svg |
| GitHub license | /github/license/{owner}/{repo}.svg |
| GitHub issues | /github/issues/{owner}/{repo}.svg |
| GitHub PRs | /github/prs/{owner}/{repo}.svg |
| GitHub commits | /github/commits/{owner}/{repo}.svg |
| Discord online | /discord/{serverId}.svg |
| Discord members | /discord/members/{inviteCode}.svg |
| Reddit karma | /reddit/{type}/u/{user}.svg |
| Static | /badge/{label}-{message}-{color}.svg |
| Dynamic JSON | /badge/dynamic/json.svg?url=...&query=... |
| HTTPS endpoint | /https/{hostname}/{path}.svg |
| Memo | /memo/{key}.svg |
Variants
Every badge supports shadcn Button variants:
Sizes
Icons
Badges auto-detect icons per provider. Override with any Simple Icons slug or Lucide icon:
Response formats
.svg— SVG image (default, for<img>tags and markdown).json— raw badge data/shields.json— shields.io-compatible endpoint
Built with
Badge components for React → jal-co/ui